/*ahking作品2004-6*，如使用请保留*/
//屏幕坐标系概念
/*

0______________   x
 |
 |
 |
 |
 y
 
 */
/*需要在htm中加入元素：
1、<html xmlns:v="urn:schemas-microsoft-com:vml">
2、
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
*/

function canvas(group_width,group_height,lnx,lny,nbx,nex,nby,ney,string_x,string_y,new_x)
{
 //lnx:横线个数；lny:竖线个数；nbx:横线起点值；nex:横线终点值；nby：竖线起点值；ney:竖线终点值
 //new_x:数据库最新日期
 
 //定义类字段
 this.ken_width=group_width;
 this.ken_height=group_height;
 this.ken_lnx=lnx;
 this.ken_lny=lny;
 this.ken_nbx=nbx;
 this.ken_nex=nex;
 this.ken_nby=nby;
 this.ken_ney=ney;
 this.ken_stringx=string_x;
 this.ken_stringy=string_y;
 this.ken_newdatex=new_x;
 //定义方法，不能加括号
 this.draw=dc_do;
  
}
 
 function dc_do()
 {
       
   //定义需要留给写纵坐标值的偏移距离
   var offset_x=360;//36个像素的距离
   //定义有效宽度
   var coordx=this.ken_width*10;
   var validcoordx = this.ken_width*10-offset_x;
 
   //定义需要留给写横坐标值的偏移距离
   var offset_y=50;
   //定义有效高度
   var coordy=this.ken_height*10;
   var validcoordy = this.ken_height*10-offset_y;
   //----------------------------------------------------------------画折线
	//从nbx到nex有nex-nbx+1个点，有nex-nbx个单位区间
	var vx=validcoordx/(this.ken_nex-this.ken_nbx);
    var vy=validcoordy/(this.ken_ney-this.ken_nby);
	var xn=0;
	var yn=0;
	var kenpoints="";
 
    var array_x=this.ken_stringx.split(",");
	var array_y=this.ken_stringy.split(",");
	var arraylen=array_x.length;
 
    if(arraylen>0)
	  {
		for(var i=0;i<arraylen;i++){
		xn=parseInt(array_x[i]*vx,10)+offset_x
		yn=parseInt((this.ken_ney-array_y[i])*vy,10)
		kenpoints=kenpoints+xn.toString()+","+yn.toString()+" ";
	    }
	  }
	  
	  
document.write("<v:group style='WIDTH:"+this.ken_width+"px;HEIGHT:"+this.ken_height+"px' coordsize='"+this.ken_width*10+","+this.ken_height*10+"'>");
 
 
	 
	//----------------------------------------------------------------画竖线
	//计算竖线之间的距离
	var intervallenx=parseInt(validcoordx/(this.ken_lny-1),10); 
	 
	//计算刻度值
	var nix=parseInt((this.ken_nex-this.ken_nbx)/(this.ken_lny-1),10);

	//将-日期转换为/日期
	var d = new Date(this.ken_newdatex.replace(/(-)/g,"\/"));

	//写入横坐标数值，并画竖线
	 
	var count=0; 
	var textPoint=this.ken_nbx;
	
	for(var i=0;i<this.ken_lny;i++){
		//从上往下画
		var px=offset_x+i*intervallenx;//定义竖线横坐标值
		var strTo=px+" "+validcoordy;//定义竖线终点坐标，vml下，坐标可以用x,y或x y的形式表示
		
		//开始划竖线，开始坐标：（px 0），终点坐标（strTo）
		document.write("<v:line from='"+px+" 0' to='"+strTo+"' style='position:absolute;z-index:8'>");
		
						
		//定义实线与虚线
		if(count%10==0){
			document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");//定义线的颜色
			    
		}
		else
		{
			document.write("<v:stroke dashstyle='dot' LineStyle='ThinThin' color='black' />");
			
		}
				
		document.write("</v:line>");
	
	
			   
		//定义写坐标值的位置，每段刻度写一个
	    if(i==10){
			var dd = new Date(d.getTime()-24*3600*1000*20);                                                                                       //200为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*10-180)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
		if(i==20){
			var dd = new Date(d.getTime()-24*3600*1000*10);                                                                                       //200为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*20-180)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
		if(i==30){
			var dd = new Date(d.getTime());                                                                                       //200为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*30-300)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
			
		}
		count++;
		textPoint=textPoint+nix;
		
	}
   
  
   //----------------------------------------------------------------画横线
 //计算横线之间的距离
 var intervalleny=parseInt(validcoordy/(this.ken_lnx-1),10); 
 
 //计算刻度值
 var niy=parseInt((this.ken_ney-this.ken_nby)/(this.ken_lnx-1),10);
  //写入纵坐标数值，并画横线
 
 var count1=0; 
 var textPoint1=this.ken_ney;
 
 for(var j=0;j<this.ken_lnx;j++){
    //从左往右画
    var strBe1=offset_x+" "+j*intervalleny;//定义横线起点坐标
    var strTo1=coordx+" "+j*intervalleny;//定义横线终点坐标，vml下，坐标可以用x,y或x y的形式表示
   
    //开始划横线，开始坐标：（strBe1），终点坐标（strTo1）
    document.write("<v:line from='"+strBe1+"' to='"+strTo1+"' style='position:absolute;z-index:8'>");
   
    //定义横线样式
    if(count1%2==0)
    {
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    
	}
	else
	{
	    //本特例不画横虚线
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    //document.write("<v:stroke dashstyle='dot' color='black' LineStyle='ThinThin'/>");
	    
	}
	
	document.write("</v:line>");
	
	   //写入坐标值
	    document.write("<v:rect  style='position:absolute;left:0;top:"+(j*intervalleny-20)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
       document.write("</v:rect>");
    
    textPoint1=textPoint1-niy;
	count1++;
	
 }
     
     
     
     //画折线语句
     document.write("<v:PolyLine  filled='false' Points='"+kenpoints+"' strokecolor='red' strokeweight='1px' />");
   
   
     document.write("</v:group>");
     
 
 }
 

